<template>
    <div class="home-categories">
        <!-- 一般有id就让key绑定id -->
        <template v-for="(item, index) in categoriesData" :key="item.id">
            <div class="item">
                <img :src=item.pictureUrl alt="">
                <div class="text">{{ item.title }}</div>
            </div>
        </template>
    </div>
</template>

<script setup>
import { storeToRefs } from 'pinia';
import useHomeStore from '../../../store/modules/home';

const homeStore = useHomeStore()
homeStore.fetchCategories()
const { categories } = storeToRefs(homeStore)
const categoriesData = categories
</script>

<style lang="less" scoped>
.home-categories {
    display: flex;
    align-items: center;
    padding: 0 20px;
    margin-top: 20px;
    margin-left: -10px;
    margin-bottom: 10px;
    height: 65px;

    // 滚动条
    overflow-x: auto;

    // 滚动条不显示
    &::-webkit-scrollbar {
        display: none;
    }

    .item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 12px;

        img {
            width: 32px;
            height: 32px;
        }

        .text {
            height: 20px;
            width: 56px;
            text-align: center;
        }
    }
}
</style>